import React, { useEffect, useState } from 'react'
import { Button, Table, Tag, Modal, Popover, Switch, message } from 'antd'
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons'
import {
  getRightListApi,
  delRightApi,
  delRightChildrenApi,
  updateRightApi,
  updateRightChildrenApi
} from '@/api/right'
const { confirm } = Modal

export default function RightList() {
  const [messageApi, contextHolder] = message.useMessage()
  const [dataSource, setDataSource] = useState([])
  const [listLoading, setListLoading] = useState(false)

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '权限名称',
      dataIndex: 'title'
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      render: (key) => {
        return <Tag color={'orange'}>{key}</Tag>
      }
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <div>
            <Popover content={<div style={{ textAlign: 'center' }}>
              <Switch checked={item.pagepermisson} onChange={() => switchMethod(item)}/>
            </div>} title="配置项" trigger={item.pagepermisson === undefined ? '' : 'click'}>
              <Button disabled={item.pagepermisson === undefined} icon={<EditOutlined/>} shape="circle" type="primary"/>
            </Popover>
            &nbsp;&nbsp;
            <Button danger icon={<DeleteOutlined/>} onClick={() => confirmMethod(item)} shape="circle"/>
          </div>
        )
      }
    }
  ]

  useEffect(() => {
    getRightList()
  }, [])

  // 获取列表
  const getRightList = () => {
    setListLoading(true)
    getRightListApi({ '_embed': 'children' }).then(res => {
      setListLoading(false)
      const list = res
      // 去除children是空的数据
      for (let i = 0; i < list.length; i++) {
        if (list[i].children.length === 0) {
          list[i].children = null
        }
      }
      // 设置数据源，渲染
      setDataSource(list)
    })
  }

  // 弹窗删除确认
  const confirmMethod = (item) => {
    confirm({
      title: '系统提示',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      icon: <ExclamationCircleOutlined/>,
      content: '删除后无法恢复,你确定要删除吗?',
      onOk() {
        let delApi = ''
        if (item.grade === 1) {
          delApi = delRightApi
        } else {
          delApi = delRightChildrenApi
        }
        setListLoading(true)
        delApi(item.id).then(() => {
          messageApi.open({
            type: 'success',
            content: '删除成功'
          })
          getRightList()
        })
      },
      onCancel() {
        // console.log('Cancel');
        console.log('取消删除了')
      }
    })
  }

  // 启动/禁用
  const switchMethod = (item) => {
    item.pagepermisson = item.pagepermisson == 1 ? 0 : 1
    let updateApi = ''
    if (item.grade === 1) {
      updateApi = updateRightApi
    } else {
      updateApi = updateRightChildrenApi
    }
    setListLoading(true)
    updateApi(item.id, {
      ...item,
      pagepermisson: item.pagepermisson
    }).then(() => {
      messageApi.open({
        type: 'success',
        content: '操作成功'
      })
      getRightList()
    })
  }

  return (
    <div>
      {contextHolder}
      <Table
        columns={columns}
        dataSource={dataSource}
        loading={listLoading}
        pagination={{ pageSize: 4 }}
      />
    </div>
  )
}
